<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix observer-target">
        <el-button size="small" type="primary" @click="handleClick('add')"
          >新增</el-button
        >
        <el-button
          size="small"
          type="warning"
          :disabled="!selectRow"
          @click="handleClick('update')"
          >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          :disabled="!selectRow"
          @click="handleClick('remove')"
          >删除</el-button
        >
      </div>
      <div class="app-container-maxheight">
        <el-table
          class="single-el-table"
          ref="Table"
          :data="menuData"
          row-key="id"
          border
          @row-click="handleRowClick"
          @selection-change="onSelectionChange"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" label="ID" width="50">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="200">
          </el-table-column>
          <el-table-column align="center" label="类型" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type == 1">目录</el-tag>
              <el-tag v-if="scope.row.type == 2" type="success">菜单</el-tag>
              <el-tag v-if="scope.row.type == 3" type="warning">按钮</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="URL"> </el-table-column>
          <el-table-column prop="apiUrl" label="ApiUrl"> </el-table-column>
          <el-table-column align="center" label="图标" width="100">
            <template slot-scope="scope">
              <div style="font-size:16px"><item v-if="scope.row.icon" :icon="scope.row.icon" /></div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="请求类型" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.methodType == 'POST'" type="success"
                >POST</el-tag
              >
              <el-tag v-if="scope.row.methodType == 'PUT'" type="warning"
                >PUT</el-tag
              >
              <el-tag v-if="scope.row.methodType == 'GET'">GET</el-tag>
              <el-tag v-if="scope.row.methodType == 'DELETE'" type="danger"
                >DELETE</el-tag
              >
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-card>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div slot="title" class="dialog-title">
        {{ handleType == "add" ? "新增" : "修改" }}
        <el-tooltip class="item" effect="dark" placement="bottom-start">
          <template slot="content">
            <p>*注意：</p>
            <p>
              1.URL、图标配置需要和前端开发人员沟通(否则可能导致前端页面渲染错误)
            </p>
            <p>
              2.ApiUrl配置需要和后端开发人员沟通(否则可能导致后端接口访问权限问题)
            </p>
          </template>
          <i class="el-icon-question self-icon-question"></i>
        </el-tooltip>
      </div>
      <el-form ref="form" :model="form" :rules="rule" label-width="80px">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type" @change="onTypeChange">
            <el-radio label="1">目录</el-radio>
            <el-radio label="2">菜单</el-radio>
            <el-radio label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上级菜单" prop="parentId">
          <el-cascader
            :show-all-levels="false"
            v-model="form.parentId"
            :options="parentMenuOpts"
            :props="{
              emitPath: false,
              checkStrictly: true,
              label: 'name',
              value: 'id',
            }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <template v-if="form.type != 3">
          <el-form-item label="URL" prop="url">
            <el-input v-model.trim="form.url"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="form.icon"></el-input>
          </el-form-item>
        </template>
        <el-form-item label="ApiUrl" prop="apiUrl" v-if="form.type != 1">
          <el-input v-model="form.apiUrl"></el-input>
        </el-form-item>
        <el-form-item label="请求类型" prop="methodType" v-if="form.type == 3">
          <el-select v-model="form.methodType">
            <el-option label="POST" value="POST"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="GET" value="GET"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否隐藏" prop="isHide">
          <el-select v-model="form.isHide">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Item from "@/layout/components/Sidebar/Item.vue";
import { requiredFormValidate } from "@/utils/validate.js";
import {
  sysmenu_add,
  sysmenu_delete,
  sysmenu_update,
  sysmenu_list,
} from "@/api/platformSys";
const getDefaultForm = () => {
  return {
    type: "1",
    name: null,
    parentId: null,
    url: null,
    apiUrl: null,
    code: null,
    icon: null,
    methodType: null,
    isHide:"0",
  };
};

export default {
  components: {
    Item,
  },
  data() {
    return {
      rule: {
        type: [{ validator: requiredFormValidate, trigger: "blur" }],
        name: [{ validator: requiredFormValidate, trigger: "blur" }],
        url: [{ validator: requiredFormValidate, trigger: "blur" }],
        methodType: [{ validator: requiredFormValidate, trigger: "blur" }],
        apiUrl: [{ validator: requiredFormValidate, trigger: "blur" }],
      },
      handleType: "",
      dialogVisible: false,
      selectRow: null,
      form: getDefaultForm(),
      menuData: [],
      parentMenuOpts: [],
    };
  },
  mounted() {
    console.log(this.$route.meta);
    this.getData();
  },
  methods: {
    getData() {
      sysmenu_list().then((res) => {
        this.menuData = res.result;
      });
    },
    getParentMenu() {
      sysmenu_list({
        filterType: 3,
      }).then((res) => {
        this.parentMenuOpts = res.result;
      });
    },
    handleClick(type) {
      switch (type) {
        case "add":
        case "update":
          this.getParentMenu();
          let mixinParams = {};
          const { children, ...rest } = this.selectRow || {};
          this.handleType = type;
          this.dialogVisible = true;
          if (this.selectRow && this.selectRow.type != 3) {
            mixinParams = {
              parentId: this.selectRow.id,
              type: `${Number(this.selectRow.type) + 1}`,
            };
          }
          this.form =
            type == "add" ? Object.assign(getDefaultForm(), mixinParams) : rest;
          this.$nextTick(() => {
            this.$refs.form.clearValidate();
          });
          break;
        case "remove":
          this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.removeRow();
          });
          break;
        default:
          return;
      }
    },
    handleSure() {
      let fn;
      this.$refs.form.validate((valid) => {
        if (valid) {
          switch (this.handleType) {
            case "add":
              fn = sysmenu_add;
              break;
            case "update":
              fn = sysmenu_update;
              break;
            default:
              return;
          }
          fn(this.form).then((res) => {
            this.dialogVisible = false;
            this.$message.success(res.msg || "操作成功");
            this.getData();
          });
        } else {
          return false;
        }
      });
    },
    removeRow() {
      const { id } = this.selectRow;
      sysmenu_delete({ id }).then((res) => {
        this.$refs.Table.clearSelection();
        this.selectRow = null;
        this.getData();
        this.$message.success("删除成功!");
      });
    },
    // 单选控制
    onSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.Table.clearSelection();
        this.selectRow = val.pop();
        this.$refs.Table.toggleRowSelection(this.selectRow);
      } else {
        this.selectRow = val[0];
      }
    },
    // 点击行选中
    handleRowClick(row) {
      this.$refs.Table.toggleRowSelection(row);
    },
    onTypeChange() {
      this.form.url = null;
      this.form.icon = null;
      this.$refs.form.clearValidate();
    },
  },
};
</script>
<style scoped>
.dialog-title {
  color: #303133;
  font-size: 18px;
}
.self-icon-question {
  color: #ccc;
}
</style>

